﻿<UserControl x:Class="Songhay.Silverlight.BiggestBox.IndexPart.Views.UserControls.KennyYoungLayoutStatesSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    xmlns:vm="clr-namespace:Songhay.Silverlight.BiggestBox.IndexPart.ViewModels"
    Tag="Blend Interactions - Kenny Young, ListBoxItem and LayoutStates"
    Width="512" Height="400">
    <UserControl.Resources>
        <vm:KennyLayoutStatesViewModel x:Key="KennyLayoutStatesViewModelDataSource" d:IsDataSource="true" />

        <Style TargetType="Button">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="24" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="#FF484848" />
            <Setter Property="Margin" Value="5,0,0,0" />
            <Setter Property="Width" Value="32" />
            <Setter Property="Height" Value="32" />
        </Style>

        <Style x:Key="TitleTextStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Foreground" Value="CadetBlue" />
        </Style>

        <DataTemplate x:Key="ColorTemplate">
            <Grid Height="128" Width="96" Background="Transparent">
                <Rectangle
                    Fill="{Binding Brush}"
                    Margin="10,10,10,35"
                    Stroke="Black"
                    StrokeThickness="2"
                    RenderTransformOrigin="0.5,0.5"
                    RadiusX="5" RadiusY="5"
                    />
                <TextBlock
                    FontFamily="Segoe UI"
                    FontSize="10"
                    Foreground="White"
                    Margin="20,10,20,10"
                    Text="{Binding Text}"
                    TextAlignment="Center"
                    VerticalAlignment="Bottom"
                    />
            </Grid>
        </DataTemplate>

        <ItemsPanelTemplate x:Key="ColorListItemsPanelTemplate">
            <toolkit:WrapPanel Orientation="Horizontal">
                <i:Interaction.Behaviors>
                    <ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.75">
                        <ei:FluidMoveBehavior.EaseX>
                            <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="8"/>
                        </ei:FluidMoveBehavior.EaseX>
                        <ei:FluidMoveBehavior.EaseY>
                            <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="8"/>
                        </ei:FluidMoveBehavior.EaseY>
                    </ei:FluidMoveBehavior>
                </i:Interaction.Behaviors>
            </toolkit:WrapPanel>
        </ItemsPanelTemplate>
        <Style x:Key="PerspectiveSwing" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <Grid x:Name="grid" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".35"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="LayoutStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="AfterLoaded" GeneratedDuration="0:0:0.75">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <BounceEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                        <VisualTransition GeneratedDuration="0:0:0.15" From="Loaded"/>
                                        <VisualTransition GeneratedDuration="0:0:0.15"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="BeforeLoaded">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.001" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="-95"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="AfterLoaded"/>
                                    <VisualState x:Name="BeforeUnloaded">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.001" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="-95"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid.Projection>
                                <PlaneProjection CenterOfRotationX="-0.1"/>
                            </Grid.Projection>
                            <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
                            <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid DataContext="{StaticResource KennyLayoutStatesViewModelDataSource}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.8*" />
            <ColumnDefinition Width="0.2*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.10*"/>
            <RowDefinition Height="0.90*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.ColumnSpan="2" Grid.Row="0"
                Margin="16,8,0,0"
                Style="{StaticResource TitleTextStyle}"
                Text="Kenny Young, ListBoxItem and LayoutStates"
                VerticalAlignment="Top"
                />
        <StackPanel Grid.Column="1" Grid.Row="1"
            HorizontalAlignment="Right" VerticalAlignment="Top"
            Margin="16,4"
            Orientation="Horizontal">
            <Button
                Command="{Binding ColorRemoveCommand}"
                Content="-"
                />
            <Button
                Command="{Binding ColorAddCommand}"
                Content="+"
                />
        </StackPanel>
        <ListBox Grid.Column="0" Grid.Row="1"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            Background="#FF333333"
            Margin="16"
            ItemContainerStyle="{StaticResource PerspectiveSwing}"
            ItemsPanel="{StaticResource ColorListItemsPanelTemplate}"
            ItemsSource="{Binding Path=Colors}"
            ItemTemplate="{StaticResource ColorTemplate}"
            />
    </Grid>
</UserControl>
